<!-- 利用光线追踪技术实现万花筒效果 -->

<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.0/math.min.js"></script>
<script type="text/javascript" src="texture_base64.js"></script>
<script>


	function getImageData(imgID) {
        const img = document.getElementById(imgID);
        const canvas = document.createElement('canvas');
        canvas.width = img.width; canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        return ctx.getImageData(0, 0, canvas.width, canvas.height);
	}

    
    function iter() {
        const height = canvas.height;
        const width = canvas.width;
        const dataIMG = getImageData('texture');
        const height_texture = textureImg.height;
        const width_texture = textureImg.width;
        canvas.width = width;
        canvas.height = height;
        let canvasData = ctx.getImageData(0, 0, width, height);
		for (let r = 0; r < height; ++r) {
            for (let c = 0; c < width; ++c) {
                const px = r * width + c;
                let u = UVData[px * 2 + 0];
                let v = UVData[px * 2 + 1];
                u = u - 0.25;
                v = v - 0.25;
                u *= 0.5
                v *= 0.5
                const u2 = u * Math.cos(theta) - v * Math.sin(theta);
                const v2 = u * Math.sin(theta) + v * Math.cos(theta);
                u = u2 + 0.5;
                v = v2 + 0.5;
                if (Math.abs(u - v) <= 1e-8) 
                    console.log('here');
                let vr = 0, vg = 0, vb = 0;
				const c2 = parseInt(u * width_texture);
				const r2 = parseInt(v * height_texture);
                if (0 <= c2 && c2 <= width_texture && 0 <= r2 && r2 <= height_texture) {
					const px2 = r2 * width_texture + c2;
					vr = dataIMG.data[px2 * 4 + 0];
					vg = dataIMG.data[px2 * 4 + 1];
					vb = dataIMG.data[px2 * 4 + 2];
                }
                canvasData.data[px * 4 + 0] = parseInt(vr * 0.95);
                canvasData.data[px * 4 + 1] = parseInt(vg * 0.95);
                canvasData.data[px * 4 + 2] = parseInt(vb * 0.95);
                canvasData.data[px * 4 + 3] = 255;
            }
		}
        theta = (theta + 0.01) % (Math.PI * 2);
		ctx.putImageData(canvasData, 0, 0);
    }


	function main() {
        canvas = document.getElementById('canvas0');
        textureImg = document.getElementById('texture');
        ctx = canvas.getContext('2d');
        UVData = window.atob(texture_base64);
        UVData = UVData.split(',');
        UVData = UVData.map(function f(v) {return parseFloat(v)});

        setInterval(iter, 50);
	}

    let theta = 3.14/2;
    let canvas = undefined;
    let ctx = undefined;
    let UVData = undefined;
    let textureImg = undefined;
	function load() {
		main();
	}

</script>

</head>
<body>
<div>
	<h2>光线跟踪技术 练习</h2>
	<h4>万花筒（伪实时）</h4>
	<p>
	输入图像：
	</p>
	<img id='texture' src="../../res/shining.jpg" onload="uvmap_loaded=true;load()"></img>
	<p>
	输出图像：
	</p>
	<canvas id="canvas0" height="240" width="480">你的浏览器不支持canvas！</canvas>
</div>
</body>
</html>
